<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="applySuccessPage" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="f_left">当前位置：</li>
                        <li class="f_left">
                            <router-link to="/index">首页></router-link>
                        </li>
                        <li class="f_left">报名成功</li>
                    </ul>
                </div>
                <div class="border_content text_center">
                    <img src="../../../static/img/title5.png" width="1150px" height="60px">
                    <div class="apply_success">
                        <img src="../../../static/img/confirm-right.png" width="54px" height="54px">
                        恭喜您，报名成功！可关闭当前界面！
                    </div>
                    <div class="apply_success_btns">
                        <!-- <a v-if="isPersonApply" class="view_invoice" href="/play/task/0/0">去学习</a>-->
                        <a class="view_invoice" @click="companyDialog=true">相关事项说明</a>
                        <button class="view_invoice" @click="lookInvoice">查看发票</button>
                    </div>
                </div>
            </div>
            <el-dialog :class="['indexDialog','companySuccessDialog',slryApply==1?'slryApply':'']" width="929px"
                :visible.sync="companyDialog">
                <img src="/static/img/apply_success_close.png" width="24px" height="24px" class="company_success_closee"
                    @click="companyDialog=false">
                <img class="indexTanBg" src="/static/img/company_apply_success.png" width="932px" height="700px" style="margin-left: -2px;" />
                <h3 class="applySuccessTitle">相关事项说明</h3>
                <div v-if="slryApply!=1" class="company_successBox">
                    <span class="fontWeight">1、面授通知（<span style="color: #ff0000;">注：未参加面授请忽略此条信息</span>）</span><br />
                    <p>面授具体时间、地点确定后，协会将以短信方式和平台运营通知学员本人，届时学员凭身份证原件和电子版听课证参加面授。</p>
                    电子版听课证获取方式：<br />
                    ①返回杭州市建筑业协会继续教育首页（http://hzxh.xclearn.com），点击右上角姓名进入个人中心→我的报名→查看面授听课证。<br />
                    ②关注协会公众号或者搜索杭州市建筑业协会继续教育平台小程序→个人中心→我的报名→查看面授听课证）参加面授集训。
                    <br>
                    <span class="fontWeight">2、学员登录账号及初始密码</span>
                    <br>
                    学员登录“个人中心”时个人账号为身份证号码，初始密码为身份证后六位。<br />
                    <span class="fontWeight">3、网教课程学习路径</span><br />
                    电脑PC端路径：登录市建协官方网站（http://www.hangzhoujx.com/）→继续教育→左侧列表在线学习栏。
                    <br>
                    手机端路径：关注协会公众号或者搜索杭州市建筑业协会继续教育平台小程序→首页继续教育（或底部菜单栏→个人中心→快速入口）。
                    <br>
                    <span class="fontWeight">4、企业查看功能</span><br>
                    点击学习平台首页右上角控制台进入企业后台管理，可查看本单位学员报名信息以及学习情况等。
                    <br>
                </div>
                <div v-else class="company_successBox">
                    <span class="fontWeight">面授须知:</span><br />
                    <p>1.面授具体时间、地点确定后，协会将以短信方式通知联系人（平台登记手机号）下载打印听课证，届时学员凭身份证原件和纸质或电子版听课证参加面授。<br />
                    </p> <br>
                    <span class="fontWeight">2.听课证获取方式：</span>
                    <br>
                    企业入口→企业登录→首页→下载专区→下载听课证。<br />
                    学员入口→个人登录→点击右上角姓名进入个人中心→报名信息→查看面授听课证→下载听课证。
                    <br>
                </div>
            </el-dialog>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../components/header_and_footer.vue'
    export default {
        name: "apply_success",
        data: function() {
            return {
                companyDialog: true,
                tradeNo: "",
                slryApply: null
            }
        },
        created: function() {
            document.title = "杭州市建筑业协会-报名成功";
        },
        mounted: function() {
            this.slryApply = localStorage.getItem("slryApply");
            this.tradeNo = this.$route.params.tradeNo;
        },
        methods: {
            lookInvoice: function() {
                this.common.toPage("/other/invoice/" + this.tradeNo);
            }
        },
        components: {
            headerFooter
        }
    }
</script>

<style scoped="scoped">
    .slryApply .indexTanBg {
        height: 500px;
    }

    .slryApply .el-dialog {
        height: 488px !important;
    }

    .slryApply .company_successBox {
        padding: 0 24px;
        width: 880px;
    }

    .header {
        width: 1150px;
    }

    .apply_success_btns {
        margin-bottom: 130px;
        margin-top: 60px;
    }

    .apply_success_btns .view_invoice {
        margin: 0 12px;
        border: 0;
        cursor: pointer;
    }

    .applySuccessTitle {
        font-size: 30px;
        position: absolute;
        top: 52px;
        font-weight: bold;
        z-index: 9999;
        color: #ffffff;
        width: 910px;
        text-align: center;
        padding: 0 10px;
    }

    .company_apply_liu {
        padding-left: 100px;
    }

    .company_success_closee {
        position: absolute;
        top: 20px;
        z-index: 99999;
        right: 29px;
    }

    .fontWeight {
        font-weight: bold;
    }

    .company_successBox {
        color: #666666;
        position: absolute;
        z-index: 99999;
        top: 190px;
        font-size: 18px;
        padding: 0 10px;
        width: 910px;
        left: 0;
        line-height: 30px;
    }

    .companySuccessDialog .el-dialog {
        margin-top: 10vh !important;
        height: 690px;
    }
</style>
